<template>
  <div class="home">
    <div class="collections">
      <!-- <div class="chart-title">报告合集</div> -->
      <div class="collection-list">
        <div
          class="collection"
          v-for="(item, index) in collections"
          :key="item.id"
          @click="toDetail(item)"
        >
          <el-image
            class="collection-cover"
            :src="item.banner"
            fit="cover"
          ></el-image>
          <div class="collection-name">{{ item.name }}</div>
          <div class="collection-sep"></div>
          <div class="collection-number">报告数量：{{ item.file_count }}</div>
          <div class="collection-tag">相关标签：{{ item.tag }}</div>
          <div class="collection-time">最近更新：{{ item.update_text }}</div>
        </div>
      </div>
      <div class="collection-page">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :page-size.sync="pageSize"
          :current-page.sync="currentPage"
          :total="listTotal"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getCollectionList } from "@/api/collection.js";

export default {
  name: "collection",
  components: {},
  data() {
    return {
      collections: [],
      pageSize: 12,
      currentPage: 1,
      listTotal: 0,
    };
  },
  created() {
    // console.log(this.$route);
    if (process.client) {
      this.getCollections();
    }
  },
  methods: {
    pageChange(page) {
      this.currentPage = page;
      this.getCollections();
    },
    getCollections() {
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      getCollectionList(params).then((res) => {
        console.log(res);
        this.collections = res.data.items;
        this.listTotal = res.data.total;
      });
    },
    toDetail(item) {
      let routeUrl = this.$router.resolve({
        path: "/collection/detail",
        query: { id: item.id },
      });
      window.open(routeUrl.href, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.collections {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: white;
  padding-bottom: 40px;
}

.collection-list {
  width: 100%;
  max-width: 1250px;
  display: flex;
  margin: 40px 0 0;
  flex-wrap: wrap;
}

.collection {
  margin-top: 20px;
  width: 25%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  color: #555;
  font: 12px / 20px "微软雅黑", Arial, "Times New Roman";
  line-height: 25px;
  border-left: 0.5px solid #e5e5e5;
  border-right: 0.5px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  &-cover {
    width: 100%;
    height: 180px;
  }
  &-name {
    font-size: 14px;
    text-decoration: none;
    color: #333;
    margin: 12px 0;
  }
  &-sep {
    width: 100%;
    height: 1px;
    background: #e5e5e5;
    margin-bottom: 8px;
  }
}

.collection:hover {
  background: #f8f8f8;
}
.seemore {
  margin-top: 48px;
  font-weight: 500;
  font-size: 16px;
  color: #8e969d;
  line-height: 24px;
  cursor: pointer;
}

.collection-page {
  margin-top: 20px;
}
</style>
